<style include="settings-shared">
  :host {
    /* The tap target extends slightly above each visible menu item. */
    --tap-target-padding: 3px;
    /* Width of the keyboard focus border. */
    --focus-border-width: 1px;
    box-sizing: border-box;
    display: block;
    padding-bottom: 2px;
    padding-top: 8px;
  }

  :host * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Override focus CSS for selectable items. */
  [selectable]:focus,
  [selectable] > :focus {
    background-color: transparent;
  }

  /* The <a> is the entire tap target, including the padding around the
    * visible icon and text. */
  a {
    background: transparent;
    display: block;
    padding: var(--tap-target-padding) 0;
  }

  /* "item" class draws the icon, text, and rounded background. */
  a.item {
    align-items: center;
    border-block-end-width: var(--focus-border-width);
    border-block-start-width: var(--focus-border-width);
    /* Always apply border so item doesn't shift when focused. */
    border-color: transparent;
    border-inline-end-width: var(--focus-border-width);
    /* No border on window edge (left in LTR, right in RTL). */
    border-inline-start-width: 0;
    border-radius: 0 20px 20px 0;
    border-style: solid;
    color: var(--cros-text-color-primary);
    display: flex;
    font-weight: 500;
    margin-bottom: 8px;
    margin-inline-end: 2px;
    min-height: 32px;
    padding-inline-start: 20px;
  }

  :host-context([dir=rtl]) a.item {
    /* Chrome doesn't support border-start-end-radius, so override. */
    border-radius: 20px 0 0 20px;
  }

  a.iron-selected.item {
    background-color: var(--cros-highlight-color);
    color: var(--cros-text-color-selection);
  }

  :host-context(.focus-outline-visible) a:focus.item {
    border-color: var(--cros-focus-ring-color);
  }

  a:hover:not(.iron-selected).item {
    background-color: var(--cros-ripple-color);
  }

  iron-icon {
    margin-inline-end: 16px;
    pointer-events: none;
    vertical-align: top;
  }

  a.iron-selected.item > iron-icon {
    fill: var(--cros-icon-color-selection);
  }

  #advancedButton {
    --ink-color: var(--cros-text-color-primary);
    align-items: center;
    background: none;
    border: none;
    border-radius: initial;
    box-shadow: none;
    color: var(--cros-text-color-primary);
    display: flex;
    font-weight: 500;
    height: unset;
    margin-inline-end: 2px;
    margin-top: 8px;
    padding-inline-end: 0;
    padding-inline-start: 20px;
    text-transform: none;
  }

  #advancedButton:focus {
    outline: none;
  }

  :host-context(.focus-outline-visible) #advancedButton:focus {
    outline: auto 5px -webkit-focus-ring-color;
  }

  #advancedButton > span {
    flex: 1;
  }

  #advancedButton > iron-icon {
    height: var(--cr-icon-size);
    margin-inline-end: 14px;  /* 16px - 2px from margin for outline. */
    width: var(--cr-icon-size);
  }

  #menuSeparator {
    /* Per bettes@, this is different from the other separator lines. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 8px;
    margin-top: 8px;
  }

  @media (prefers-color-scheme: dark) {
    #menuSeparator {
      border-bottom: var(--cr-separator-line);  /* override */
    }
  }

  #aboutItem {
    /* Reserve space so the last menu item isn't too close to the window
      * bottom edge, 48px under the text baseline. */
    margin-bottom: calc(
        48px - calc(var(--tap-target-padding) + var(--focus-border-width)));
  }
</style>
<iron-selector id="topMenu"
    attr-for-selected="href" on-iron-activate="onSelectorActivate_"
    selectable="a"
    role="navigation" on-click="onLinkClick_">
  <a href="/internet" class="item">
    <iron-icon icon="os-settings:network-wifi"></iron-icon>
    $i18n{internetPageTitle}
  </a>
  <a href="/bluetooth" class="item">
    <iron-icon icon="cr:bluetooth"></iron-icon>
    $i18n{bluetoothPageTitle}
  </a>
  <a id="multidevice" href="/multidevice" class="item"
      hidden="[[isGuestMode_]]">
    <iron-icon icon="os-settings:multidevice-better-together-suite">
    </iron-icon>
    $i18n{multidevicePageTitle}
  </a>
  <a id="osPeople" href="/osPeople" hidden="[[isGuestMode_]]" class="item">
    <iron-icon icon="cr:person"></iron-icon>
    $i18n{osPeoplePageTitle}
  </a>
  <a id="kerberos" href="/kerberos" class="item"
      hidden="[[!showKerberosSection]]">
    <iron-icon icon="os-settings:auth-key"></iron-icon>
    $i18n{kerberosPageTitle}
  </a>
  <a href="/device" class="item">
    <iron-icon icon="os-settings:laptop-chromebook"></iron-icon>
    $i18n{devicePageTitle}
  </a>
  <a id="personalization" href="/personalization" class="item"
      hidden="[[isGuestMode_]]">
    <iron-icon icon="os-settings:paint-brush"></iron-icon>
    $i18n{personalizationPageTitle}
  </a>
  <a href="/osSearch" class="item">
    <iron-icon icon="cr:search"></iron-icon>
    $i18n{osSearchPageTitle}
  </a>
  <a href="/osPrivacy" class="item">
    <iron-icon icon="cr:security"></iron-icon>
    $i18n{privacyPageTitle}
  </a>
  <a href="/apps" class="item">
    <iron-icon icon="os-settings:apps"></iron-icon>
    $i18n{appsPageTitle}
  </a>
  <cr-button id="advancedButton"
      aria-expanded$="[[boolToString_(advancedOpened)]]"
      on-click="onAdvancedButtonToggle_">
    <span>$i18n{advancedPageTitle}</span>
    <iron-icon icon="[[arrowState_(advancedOpened)]]">
    </iron-icon>
  </cr-button>
  <iron-collapse id="advancedSubmenu" opened="[[advancedOpened]]">
    <iron-selector id="subMenu" selectable="a" attr-for-selected="href"
        role="navigation" on-click="onLinkClick_">
      <a href="/dateTime" class="item">
        <iron-icon icon="os-settings:access-time"></iron-icon>
        $i18n{dateTimePageTitle}
      </a>
      <a href="/osLanguages" class="item">
        <iron-icon icon="os-settings:language"></iron-icon>
        $i18n{osLanguagesPageTitle}
      </a>
      <a href="/files" hidden="[[isGuestMode_]]" class="item">
        <iron-icon icon="os-settings:folder-outline"></iron-icon>
        $i18n{filesPageTitle}
      </a>
      <a href="/osPrinting" class="item">
        <iron-icon icon="os-settings:print"></iron-icon>
        $i18n{printingPageTitle}
      </a>
      <a href="/crostini" hidden="[[!showCrostini]]" class="item">
        <iron-icon icon="os-settings:developer-tags"></iron-icon>
        $i18n{crostiniPageTitle}
      </a>
      <a href="/osAccessibility" class="item">
        <iron-icon icon="os-settings:accessibility"></iron-icon>
        $i18n{a11yPageTitle}
      </a>
      <a id="osReset" href="/osReset" hidden="[[!showReset]]" class="item">
        <iron-icon icon="os-settings:restore"></iron-icon>
        $i18n{resetPageTitle}
      </a>
    </iron-selector>
  </iron-collapse>
  <div id="menuSeparator"></div>
  <a id="aboutItem" href="/help" class="item">
    $i18n{aboutOsPageTitle}
  </a>
</iron-selector>
